<template>
<div class="check">
<!--  -->
<el-table
  :data="tableData"
  border
  style="width: 98%"
  fit
  type="index"
  class="table"
  max-height="700"
  >
<el-table-column
  fixed
  label="序号"
  width="70"
  >
  <template scope="scope">
    {{scope.$index+1}}
  </template>
</el-table-column>
<el-table-column
  fixed
  prop="date"
  label="日期"
  width="180"
  sortable 
  >
</el-table-column>
  <el-table-column
  prop="doctor"
  label="开方医生"
  width="100">
</el-table-column>
  <el-table-column
  prop="shop_names"
  label="所属药房"
  width="200">
</el-table-column>

  <el-table-column
  prop="need_detail"
  label="处方详情"
  width="300">
</el-table-column>

<el-table-column
  prop="status"
  label="审批状态"
  width="250">
</el-table-column>

<el-table-column
  label="操作"
  width="250"
  >
  <!-- slot-scope 是 Vue.js 2.5.0 新增的一个特性，用于在父组件中向子组件传递数据。在这个代码片段中，
  <template> 标签使用了 slot-scope="scope" 属性，这样就可以将 <el-table-column> 组件中的数据以及作用域(scope)对象传递给 <template> 组件。
  在 <template> 中，可以通过 scope 来访问父组件中定义的变量和方法，并进行相应的处理，比如在这个例子中，用于获取当前行数据以及行号(index)，
  并传递给对应的方法进行处理。 -->
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">通过</el-button>
    <el-button type="text" size="small" @click="handleDeleted(scope.row,scope.$index)" class="deleted">拒绝</el-button>
  </template>
</el-table-column>
</el-table>
  <div class="tableData_length" v-if="istableDataLength">当前数据为{{this.tableData.length}}条</div>   
                                     <!-- 在哪里显示的 -->
  </div>

</template>

<script>

export default {
  data(){
    return{
      istableDataLength:true,
      tableData: [],
      check_index:'',
      order_code:'6',   // ?
    }
  },
  methods:{
        //通过
         handleClick(row,index) {
            console.log('拿到index',index);
            this.check_index = index
            this.$confirm('是否通过该审核?', '用户审批提示', {
            confirmButtonText: '通过',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.order_code ='02023040'+Math.floor(Math.random()*4000) 
            this.$message({
                type: 'success',
                message: '已通过!'
            });
            //更改为已通过
            this.$axios.post("/api/update/order_lists?username="+this.tableData[this.check_index].username+
            '&status=已通过'+'&order_code='+this.order_code).then(res=>{
               //数据变化执行刷新
               this.refresh()
              //修改成功则插入到真正订单列表
              console.log(res.data.params.data.username);
              // ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？/
              if(res.data.params.data.username == this.tableData[this.check_index].username){     
                  this.$axios.post('api/message_lists/insert?date='+this.tableData[index].date+'&order_code='+this.order_code+'&doctor='+this.tableData[index].doctor+'&username='+this.tableData[index].username
                  +'&sex='+this.tableData[index].sex+'&age='+this.tableData[index].age+'&IDcard='+this.tableData[index].IDcard+'&ill_history='+this.tableData[index].ill_history+'&result='+this.tableData[index].result+'&address='
                  +this.tableData[index].address+'&need_detail='+this.tableData[index].need_detail+'&source='+this.tableData[index].source+'&total_price='+this.tableData[index].total_price+'&help='+this.tableData[index].help
                  +'&status=确认支付'+'&shop_names='+this.tableData[index].shop_names).then(res=>{
                    // Math.floor(Math.random()*1000)
                    console.log(res.data.data);
                  })
                  console.log('数据迁移成功',this.order_code);
              } 
            })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
            //  this.code_mess ='Code:'+ Math.floor(Math.random()*4000)
        //    this.$axios.post("/api/update/message_lists?username="+this.tableData)
          },
        //拒绝
        handleDeleted(row,index){
            this.check_index = index
            this.$confirm('真的要拒绝该审核?', '用户审批提示', {
            confirmButtonText: '拒绝',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '已拒绝!'
            });
            this.tableData[this.check_index].status = '已拒绝'
            this.$axios.post("/api/update/order_lists?username="+this.tableData[this.check_index].username+
            '&status='+this.tableData[this.check_index].status)
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            });          
            });
        },

        //刷新
        refresh(){
            //刷新
              let timer =  setInterval(res=>{
                      this.$router.replace({ path:'/empty',query:{a:'check'}})    
                      console.log('定时器');
                      clearInterval(timer)
                },800)
        }
          
      },
  mounted(){
    //发送数据请求
      this.$axios.get("/api/order_lists").then(res=>{
       this.tableData = res.data.params.data
       console.log('审核页面数据',this.tableData);
      //  console.log('打印一下总价',this.tableData[0].total_price);
    })
    if(this.tableData.length==0){
      this.istableDataLength = false
    }

  },
}
</script>

<style>

.deleted{
  color: crimson;
}
.el-icon-edit{
  position: absolute;
  top: 0.5%;
  width: 20px;
  height: 10px;
  right: 2%;
  color: white;
  background-color: dodgerblue;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}
.el-descriptions__body {
  margin-left: 0px;
  width: 100%;
}
.input_medium{
  width:140px;
  margin-right: 20px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_min{
  width: 50px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_max{
  width: 400px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}

.lose2{
  height: 0px;
}
.check{
  position: absolute;
  top: 10%;
  left: 182px;
  width: 88.8%;
  height: auto;
  display: flex;
  flex-flow: column;
  user-select: none;
  transition: all 1s;

}

  .selections{
    position: absolute;
    text-align: left;
    top: 4%;
    left: 1%;
    width: 100%;
    height: 0px;
    opacity: 0%;
    transition: all 1s;
  }
  
  .selections>i{
    margin: 3px;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: rgb(99, 168, 237);
  }
    .selections>i:nth-child(5){
      position: absolute;
    left: 89%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }

  .selections>i:nth-child(6){
    position: absolute;
    left: 93.5%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }
  .selections>i:hover{
    background-color: dodgerblue;
  }
  .selections>i:active{
    background-color: rgba(30, 143, 255, 0.626);
  }
  .span{
    position: absolute;
    display: block;
    left: 0%;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 20px;
    font-family: '宋体';
    color: gray;
  }
  .lose_a{
    height: 15px;
    background-color: gray;
    transition: all 1s;
  }
.detail_message{
  opacity: 0%;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 98%;
  height: 0px;
  transition: all 1s;
  box-shadow: 0px 1px 4px gray;
  /* background-color: gray; */
}

.tableData_length{
  text-align: center;
  color: gray;
}
.table{
  width: 50%;
  margin-top: 0px;
  margin-left: 10px;
  box-shadow: 0px 0px 4px gray;
  color: white;
  transition: all 1s;
}






</style>